<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta charset="utf-8" name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
	<style type="text/css">
	*{margin: 0;padding: 0;list-style: none;}
		.box{
			width: 150px;height: 150px;position: absolute;
			transform: rotate(0deg);
		}
		.div1{
			background: red;
			top: 100px;left:50px;
		}
		.div2{
			background: yellow;
			top: 200px;left:150px;
		}
		.div3{
			background: lightblue;
			top: 150px;right:50px;
		}
	
	</style>
</head>
<body>

	<div class="div1 box"></div>
	<div class="div2 box"></div>
	<div class="div3 box"></div>


	<script type="text/javascript">
		window.onload=function(){
			let box=document.getElementsByClassName('box');
				Array.from(box).forEach(item=>{
					drag(item);
				})
				let old_ang=0;
			function drag(obj){
				obj.addEventListener('touchstart',ev=>{
					ev.preventDefault();

					let disX=ev.targetTouches[0].pageX-obj.offsetLeft;
					let disY=ev.targetTouches[0].pageY-obj.offsetTop;
					//手指的个数大于2的时候，才有机会进行缩放放大的造作
					let ang=Math.atan2(disY,disX)*180/Math.PI;
					let startAng=old_ang;
					if(ev.targetTouches.length>=2){
						var dis=Math.sqrt(Math.pow(ev.targetTouches[0].clientX-ev.targetTouches[1].clientX,2)+Math.pow(ev.targetTouches[0].clientY-ev.targetTouches[1].clientY,2));
						var w=obj.offsetWidth,h=obj.offsetHeight;
					}
					function fnmove(ev){
						ev.preventDefault();//放在move里面用
						
						if(ev.targetTouches.length>=2){


							let disX=ev.targetTouches[0].pageX-obj.offsetLeft;
							let disY=ev.targetTouches[0].pageY-obj.offsetTop;
							let ang2=Math.atan2(disY,disX)*180/Math.PI;

							old_ang=startAng+ang2-ang;

							obj.style.transform=`rotate(${old_ang}deg)`;

							let dis2=Math.sqrt(Math.pow(ev.targetTouches[0].clientX-ev.targetTouches[1].clientX,2)+Math.pow(ev.targetTouches[0].clientY-ev.targetTouches[1].clientY,2));


							obj.style.width=dis2*w/dis+'px';
							obj.style.height=dis2*h/dis+'px';
						}else{
							obj.style.left=ev.targetTouches[0].pageX-disX+'px';
							obj.style.top=ev.targetTouches[0].pageY-disY+'px';
						}
					}
					function fnend(){
						let bl=false;
						Array.from(ev.changedTouches).forEach(item=>{
							if(item.identifier==id){
								bl=true;//判断松开的手指的identifier
							}
						})
						if(bl){
							obj.removeEventListener('touchmove',fnmove,false)
							obj.removeEventListener('touchend',fnend,false)
						}
					}
					obj.addEventListener('touchmove',fnmove,false)
					obj.addEventListener('touchend',fnend,false)
				},false);
			}

		};	
	</script>
</body>
</html>